<template>
  <div class="page-container-padding page-view">
    <el-form
      ref="mform"
      label-width="80px"
      label-position="right"
      :model="mistake"
      :rules="formRules"
    >
      <el-form-item label="日期">
        <el-date-picker
          v-model="mistake.mistake_date"
          value-format="yyyy-MM-dd"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="失误人员" prop="mistake_name">
        <el-select
          v-model="mistake.mistake_uid"
          filterable
          @change="userSelectChange"
        >
          <el-option
            v-for="u in user4Select"
            :key="u.id"
            :value="u.id"
            :label="u.admin_name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属小组" prop="mistake_group">
        <el-select v-model="mistake.mistake_group">
          <el-option
            v-for="u in group4Select"
            :key="u.gkey"
            :value="u.gkey"
            :label="u.gname"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="失误类型" prop="mistake_type">
        <el-select v-model="mistake.mistake_type">
          <el-option
            v-for="u in type4Select"
            :key="u.value"
            :value="u.value"
            :label="u.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发现人员" prop="discovery_name">
        <el-input
          v-model="mistake.discovery_name"
          placeholder="在这里写入发现人员"
        ></el-input>
      </el-form-item>
      <el-form-item label="详细描述" prop="mistake_desc">
        <el-input
          v-model="mistake.mistake_desc"
          show-word-limit
          type="textarea"
          :rows="3"
          maxlength="500"
          placeholder="在此输入失误的详细描述"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="saveLoading" @click="toSaveMistake">
          确定提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { GetGroupDeptEmployee } from '@/api/departmentWork/index'
  import { CreateWorkMistake } from '@/api/departmentWork/mistake'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  export default {
    data() {
      return {
        user4Select: [],
        group4Select: [
          { gkey: 'G01', gname: '宏观金融' },
          { gkey: 'G02', gname: '金属小组' },
          { gkey: 'G03', gname: '能化小组' },
          { gkey: 'G04', gname: '农产品组' },
          { gkey: 'G99', gname: '其他职能' },
        ],
        type4Select: [
          { value: 1, label: '自主发现' },
          { value: 2, label: '业务提醒' },
          { value: 3, label: '客户投诉' },
          { value: 9, label: '其他' },
        ],
        mistake: {
          mistake_date: datetimeToStr(new Date(), true, '-'),
          mistake_uid: null,
          mistake_name: '',
          mistake_group: '',
          mistake_type: '',
          mistake_desc: '',
          discovery_name: '',
        },
        formRules: {
          mistake_name: {
            required: true,
            message: '选择失误人员',
            trigger: 'change',
          },
          mistake_group: {
            required: true,
            message: '选择人员所在组',
            trigger: 'change',
          },
          mistake_type: {
            required: true,
            message: '选择失误类型',
            trigger: 'change',
          },
          mistake_desc: {
            required: true,
            message: '详细描述必填',
            trigger: 'blur',
          },
          discovery_name: {
            required: true,
            message: '发现人员必填',
            trigger: 'blur',
          },
        },
        saveLoading: false,
      }
    },
    mounted() {
      GetGroupDeptEmployee().then((res) => {
        this.user4Select = res.data
      })
    },
    methods: {
      userSelectChange(val) {
        for (let i = 0; i < this.user4Select.length; i++) {
          const u = this.user4Select[i]
          if (u.id === val) {
            this.mistake.mistake_group = u.group_en
            this.mistake.mistake_name = u.admin_name
            break
          }
        }
      },
      toSaveMistake() {
        this.$refs.mform.validate((validate) => {
          if (!validate) return
          this.saveLoading = true
          CreateWorkMistake(this.mistake)
            .then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.saveLoading = false
              this.$refs.mform.resetFields()
            })
            .catch(() => {
              this.saveLoading = false
            })
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .page-view {
    background-color: #fff;
  }
</style>
